<template>
  <div class="settings-view">
    <div class="settings-content">
      <h2>设置</h2>

      <el-tabs>
        <el-tab-pane label="常规设置">
          <h3>更新</h3>
          <el-form label-width="120px" inline>
            <el-form-item label="自动检查更新">
              <el-switch v-model="storedSettings.general.autoUpdate" />
              &nbsp;&nbsp;&nbsp;
              <el-button type="primary" size="small" @click="checkUpdate">检查更新</el-button>
            </el-form-item>
          </el-form>
          <h3>调试模式</h3>
          <el-form label-width="120px">
            <el-form-item label="开启调试模式">
              <el-switch v-model="storedSettings.general.debugMode" />
            </el-form-item>
          </el-form>

          <h3>语言</h3>
          <el-form label-width="120px">
            <el-form-item label="界面语言">
              <el-select v-model="storedSettings.general.language">
                <el-option label="简体中文" value="zh-CN" />
                <el-option label="English" value="en" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="编辑器">
          <h3>图片设置</h3>
          <el-form label-width="120px">
            <el-form-item label="图片保存位置">
              <el-input v-model="storedSettings.editor.imageStoragePath" />
            </el-form-item>
          </el-form>

          <h3>空间设置</h3>
          <el-form label-width="120px">
            <el-form-item label="笔记空间位置">
              <el-input v-model="storedSettings.editor.notebookPath">
                <template #append>
                  <el-button @click="handleSelectNotebookPath">修改位置</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-form>

          <h3>编辑器设置</h3>
          <el-form label-width="120px">
            <el-form-item label="允许笔记多开">
              <el-switch v-model="storedSettings.editor.enableMultipleNotes" />
            </el-form-item>

            <el-form-item label="最大打开数量" v-if="storedSettings.editor.enableMultipleNotes">
              <el-input-number
                v-model="storedSettings.editor.maxOpenNotes"
                :min="1"
                :max="20"
                :step="1"
              />
            </el-form-item>

            <el-form-item label="标签栏换行" v-if="storedSettings.editor.enableMultipleNotes">
              <el-switch v-model="storedSettings.editor.wrapTabs" />
            </el-form-item>

            <el-form-item label="自动保存间隔">
              <el-input-number
                v-model="storedSettings.editor.autoSaveInterval"
                :min="0"
                :max="300"
                :step="10"
              >
                <template #append>秒</template>
              </el-input-number>
              <div class="el-form-item-tip">设置为0表示不自动保存</div>
            </el-form-item>

            <el-form-item label="历史记录数量">
              <el-input-number
                v-model="storedSettings.editor.maxHistoryCount"
                :min="10"
                :max="200"
                :step="10"
              />
            </el-form-item>

            <el-form-item label="默认笔记类型">
              <el-select v-model="storedSettings.editor.defaultNoteType">
                <el-option label="Markdown" value="markdown" />
                <el-option label="富文本" value="richtext" />
              </el-select>
            </el-form-item>
            <template v-if="storedSettings.editor.defaultNoteType === 'markdown'">
              <el-form-item label="所见即所得">
                <el-switch v-model="storedSettings.editor.markdownConfig.livePreview" />
              </el-form-item>
              <el-form-item label="代码高亮">
                <el-switch v-model="storedSettings.editor.markdownConfig.codeHighlight" />
              </el-form-item>
            </template>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="外观">
          <h3>主题设置</h3>
          <el-form label-width="120px">
            <el-form-item label="主题">
              <el-select v-model="storedSettings.appearance.theme" style="width: 100%">
                <el-option label="自动" value="auto" />
                <el-option label="亮色" value="light" />
                <el-option label="暗色" value="dark" />
              </el-select>
            </el-form-item>
            <el-form-item label="字体大小">
              <el-input-number v-model="storedSettings.appearance.fontSize" :min="12" :max="24" style="width: 100%" />
            </el-form-item>
            <el-form-item label="字体">
              <el-select v-model="storedSettings.appearance.fontFamily">
                <el-option label="系统默认" value="system-ui" />
                <el-option label="微软雅黑" value="Microsoft YaHei" />
                <el-option label="宋体" value="SimSun" />
              </el-select>
            </el-form-item>
          </el-form>

          <h3>颜色设置</h3>
          <el-form label-width="120px" inline>
            <el-form-item label="主题颜色">
              <el-color-picker v-model="storedSettings.appearance.colors.primary" show-alpha />
            </el-form-item>
            <el-form-item label="次要颜色">
              <el-color-picker v-model="storedSettings.appearance.colors.secondary" show-alpha />
            </el-form-item>
            <el-form-item label="成功颜色">
              <el-color-picker v-model="storedSettings.appearance.colors.success" show-alpha />
            </el-form-item>
            <el-form-item label="警告颜色">
              <el-color-picker v-model="storedSettings.appearance.colors.warning" show-alpha />
            </el-form-item>
            <el-form-item label="危险颜色">
              <el-color-picker v-model="storedSettings.appearance.colors.danger" show-alpha />
            </el-form-item>
            <el-form-item label="信息颜色">
              <el-color-picker v-model="storedSettings.appearance.colors.info" show-alpha />
            </el-form-item>
          </el-form>

          <h3>背景设置</h3>
          <el-form label-width="120px">
            <el-form-item label="背景类型">
              <el-radio-group v-model="storedSettings.appearance.background.type">
                <el-radio label="color">纯色</el-radio>
                <el-radio label="image">图片</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="背景值">
              <el-color-picker v-if="storedSettings.appearance.background.type === 'color'"
                               v-model="storedSettings.appearance.background.value" />
              <el-upload v-else
                         action="#"
                         :auto-upload="false"
                         :on-change="handleBackgroundUpload">
                <el-button type="primary">选择图片</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="透明度">
              <el-slider v-model="storedSettings.appearance.background.opacity" :min="0" :max="1" :step="0.1" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="同步">
          <h3>同步设置</h3>
          <el-form label-width="120px">
            <el-form-item label="开启同步">
              <el-switch v-model="storedSettings.sync.enabled" />
            </el-form-item>
            <el-form-item label="同步类型">
              <el-select v-model="storedSettings.sync.type" :disabled="!storedSettings.sync.enabled">
                <el-option label="OneDrive" value="onedrive" />
                <el-option label="自定义服务器" value="custom" />
              </el-select>
            </el-form-item>
            <el-form-item label="服务器地址" v-if="storedSettings.sync.type === 'custom'">
              <el-input v-model="storedSettings.sync.serverUrl" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="隐私">
          <h3>加密设置</h3>
          <el-form label-width="120px">
            <el-form-item label="文件加密">
              <el-switch v-model="storedSettings.privacy.fileEncryption" />
            </el-form-item>
            <el-form-item label="传输加密">
              <el-switch v-model="storedSettings.privacy.transmissionEncryption" />
            </el-form-item>
          </el-form>

          <h3>超时保护</h3>
          <el-form label-width="120px">
            <el-form-item label="开启超时保护">
              <el-switch v-model="storedSettings.privacy.timeoutProtection" />
            </el-form-item>
            <el-form-item label="超时时间(分钟)" v-if="storedSettings.privacy.timeoutProtection">
              <el-input-number v-model="storedSettings.privacy.timeoutDuration" :min="1" :max="120" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div class="settings-actions">
        <el-button @click="resetSettings">重置</el-button>
        <el-button type="primary" @click="saveSettings">保存</el-button>
        <el-button type="success" @click="$router.replace('/')">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useSettingsStore } from '@/stores/settings'
import {ElMessage, ElMessageBox} from 'element-plus'
import {notebookService} from "@/services/ipc.ts";

const settingsStore = useSettingsStore()
const { storedSettings } = storeToRefs(settingsStore)

// 保存设置
const saveSettings = () => {
  settingsStore.applySettings()
  ElMessage.success('设置已保存并生效')
}

const checkUpdate = () => {
  // TODO: 实现检查更新功能
}

const handleBackgroundUpload = (file: any) => {
  // TODO: 实现背景图片上传功能
}

const handleSelectNotebookPath = async () => {
  try {
    const newPath = await notebookService.selectPath()
    if (!newPath) return  // 用户取消了选择

    if (await notebookService.hasNotes(settingsStore.settings.editor.notebookPath)) {
      // 显示确认对话框
      const confirmed = await ElMessageBox.confirm(
        '检测到当前笔记空间中存在笔记，是否将笔记迁移到新位置？',
        '迁移确认',
        {
          confirmButtonText: '迁移',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )

      if (!confirmed) return
    }

    await settingsStore.updateNotebookPath(newPath)
    await settingsStore.applySettings()
  } catch (error) {
    console.error('Failed to update notebook path:', error)
    ElMessage.error('更新笔记空间位置失败')
  }
}

// 重置设置
const resetSettings = () => {
  settingsStore.resetSettings()
  ElMessage.success('设置已重置')
}
</script>

<style lang="scss" scoped>
.settings-view {
  flex: 1;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: var(--bg-color);
  overflow-y: auto;

  .settings-content {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    h2 {
      margin: 0 0 20px;
      font-size: 24px;
      font-weight: 600;
      color: var(--text-color);
    }

    :deep(.el-tabs) {
      .el-tabs__header {
        margin-bottom: 24px;
      }

      .el-tabs__nav {
        .el-tabs__item {
          font-size: 16px;
          height: 40px;
          line-height: 40px;
          color: var(--text-color);

          &.is-active {
            color: var(--hover-color);
          }
        }
      }

      .el-tabs__content {
        overflow: visible;
      }
    }

    .el-form {
      .el-form-item {
        margin-bottom: 20px;

        :deep(.el-form-item__label) {
          font-weight: 500;
          color: var(--text-color);
          padding-bottom: 8px;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .settings-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      margin-top: 32px;
      padding-top: 20px;
      border-top: 1px solid var(--border-color);
    }
  }
}
</style>
